<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    单页面应用叫SPA应用，根据模拟路由，让页面显示不同的内容

    多页面就是我们平时写的东西，多页面就是后台创建的路由，根据路由返回不同的页面渲染在浏览器

    vue擅长完成单页面

    单页面可以模拟多页面的效果

    我们只需要在app的模板中写一个router-view即可实现多页面切换效果
    所谓的页面就是一个个的组件
  -->
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    // 创建组件
    const profile = {
      template: `
        <div>我的</div>
      `
    }
    const gold = {
      template: `
        <div>金币商城</div>
      `
    }
    // 创建路由配置
    const routes = [
      {
        path: '/profile',
        component: profile
      }, {
        path: '/gold',
        component: gold
      }
    ]
    // 创建router实例
    const router = new VueRouter({
      routes
    })
    const app = new Vue({
      el: '#app',
      router
    })
  </script>
</body>
</html>